<template>
  <div @click="fn" class="base-input">
    <!-- input有一个value属性，用来设置他默认显示的内容 -->
    <!-- 设置为父组件传递过来的值，也就是props里的value -->

    <!-- 一边输入，就要一边传值，输入框的正在输入事件（input） -->
    <input ref="inp" v-bind="$attrs" :value="value" @input="func"/>
  </div>
</template>

<script>
export default {
  name: 'BaseInput',
  // 禁用特性继承
  // 就是指禁用默认的非props放到根标签上
  inheritAttrs: false,
  props: {
    value: String,
    // 用来控制谁有焦点
    autofocus: Boolean,
    
  },
  methods: {

    // e是事件对象，e.targer就是事件源，换句话说就是这个input
    // input里有个属性叫value,获得它输入的内容
    func(e) {

      // 给父组件发了一个input事件
      // 传给父组件的值是 输入的内容
      this.$emit('input', e.target.value)
    },

    fn () {

      console.log(this.$attrs)
    }
  },

  mounted () {
    // 代表这个属性为true才让获得焦点
    if (this.autofocus) {
      this.$refs.inp.focus()
    }
  }
}
</script>

<style>
.base-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
}
.base-input input {
  font-size: 15px;
  appearance: none;
  margin-bottom: 5px;
  box-sizing: border-box;
  color: #6a4d52;
  border-radius: 5px;
  border: 1px solid #dcdfe6;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
  outline: none;
}
.base-input input:focus {
  outline: none;
  border-color: #409eff;
}
</style>
